<template>
	<div class="five">
    <img src="../assets/logobg.jpg" style="width:100vw" alt="" />
    <!-- <router&#45;link :to="{path:'/trade'}" title='trade'>iiiii -->
    <!-- </router&#45;link> -->
    <div v-if="working">
      <p>{{all_nots}}</p>
      <p>{{ all_login  }}</p>
      <p>test01:{{all_myrest}}</p>
      <h1>  Counter is even or Odd {{ evenOrOdd }} </h1>
    </div>
    <!-- <p>{{isActive}}</p> -->
    <!-- {{china&#45;mobile}}ss -->
    <!-- {{all_myrest}} -->
  <!-- <h1>alablablb{{ $store.state.vux.rest_Login}}</h1>
  <h1 v-if='myrests'>{{myrest.body.message}}</h1> -->
  <!-- <clocker time="2018&#45;08&#45;08"> -->
  <!-- %M -->
  <!-- </clocker> -->
    <ul class="top_tabs">
      <li  @click="isActive=false;next=false" v-bind:class="{ active: !isActive }">注册</li>
      <li @click="isActive=true"   v-bind:class="{ active: isActive }">登录</li>
    </ul>

    <!-- <h1> agent{{agent}} sales{{member}}</h1> -->
    <div class="inlogin" v-if="!isActive && !next">
      <group title="注册" class="weui-cells_form">
      <x-input title="用户名" v-model="publicMobile" is-type="china-mobile" placeholder="请输入用户名">>
      </x-input>
        <!-- <img slot="right" class="weui&#45;vcode&#45;img" src="http://weui.github.io/weui/images/vcode.jpg"> -->
      <x-input title="发送验证码" placeholder="请输入验证码"   v-model="publicVali"  class="weui-vcode">
        <x-button slot="right" @click.native="sendValidCode"  :disabled="publicMobile==''||  mydisabled "  type="primary" mini><span id="mycounter"></span>发送验证码</x-button>
      </x-input>
    </group>

      <x-button class="submitbtn"  @click.native="stepone" type="default" :disabled="publicVali== '' || publicMobile == '' ? '' : disabled">下一步</x-button>
    </div>
    <div class="inlogin" v-if="!isActive && next">
      <x-input title="密 码" type="password" v-model="publicPwd" placeholder="请输入密码"></x-input>
      <x-input title="邀请码" v-model="publicInvate" placeholder="请输入邀请码(选填)"></x-input>
      <x-button  @click.native="steptwo" type="warn">提交</x-button>
    </div>
    <div class="inlogin" v-if="isActive">
      <group title="登录" class="weui-cells_form">
      <x-input title="用户名" v-model="mypayload.postData.mobile" is-type="china-mobile" placeholder="请输入用户名"></x-input>
      <x-input title="密 码" type="password" v-model="mypayload.postData.password" placeholder="请输入密码"></x-input>
      <!-- <x&#45;input title="邀请码" v&#45;model="RegisterTwo.postData.fromUserCode" placeholder="邀请码"></x&#45;input> -->
      <x-button  :disabled="mypayload.postData.mobile== '' || mypayload.postData.password== '' ? '' : disabled" @click.native="dosth" type="primary">登陆</x-button>
      </group>
    </div>

        <!-- <x&#45;button @click.native="decrement">&#45;</x&#45;button> -->
        <!-- <x&#45;button @click.native="increment">+</x&#45;button> -->

</div>
</template>
<i18n>
Show Me:
  zh-CN: 显示
Use as a plugin:
  zh-CN: 以插件方式调用
Congratulations:
  zh-CN: 恭喜
Your Message is sent successfully~:
  zh-CN: 消息已成功发送
Do you agree?:
  zh-CN: 同意不?
will auto close in 3s:
  zh-CN: 3秒后关闭
</i18n>
<script>

	 import stores from './mystore.js'
import Vue from 'vue';
import { Flexbox,FlexboxItem,XButton, XInput,Group, Tab, TabItem ,TransferDomDirective as TransferDom ,Clocker } from 'vux'
import { mapGetters,mapActions } from 'vuex'
import sha1 from 'js-sha1'
	export default {
    mounted(){
      this.$nextTick(function(){
        // Event.listen("gochecking",(e)=>{
        //   // alert(e)
        // // var o = JSON.stringify(e)
        //   if (e.body.resultCode!==0){
        //   e = e.body.message
        //     this.next = false
        //   }
        //     this.$vux.alert.show({
        //       title: '验证手机',
        //       content: this.$t(e),
        //       onShow () {
        //         console.log('Plugin: I\'m showing')
        //       },
        //       onHide () {
        //         console.log('Plugin: I\'m hiding  now')
        //       }
        //     })
        // })
      })
    },
    data (){
      return {
        // xx:true,
        mydisabled:false,
        endTime:60,
        disabled:false,
        publicMobile:"",
        publicVali:"",
        publicPwd:"",
        publicInvate:"",
        next:false,
        working:false,
        isActive:true,
        // mypayload:{
        //   actionName:"Login",
        //   url:'http://10.8.8.16:8080/lejf-mobile-api/api',
        //   postData: {
        //     mobile:"13390650501",
        //     password:"rest"
        //   }
        // }





        // RegisterTwo:{
        //   actionName:"Register",
        //   url:'baseapi',
        //   key:"Registertwo",
        //   postData: {
        //     mobile:"",
        //     password:"",
        //     step:"2",
        //     checkFromUserCode:true,
        //     fromUserCode:""
        //     // "name":"Jack",
        //
        //     // "gameId ":"1",
        //     // " declarationVer":"1.1.0"
        //   }
        // },
        // RegisterOne:{
        //   actionName:"Register",
        //   key:'Regone',
        //   url:'baseapi',
        //   postData: {
        //     step:"1",
        //     mobile:this.getPubMobile,
        //     validCode:""
        //     // "name":"Jack",
        //
        //     // "gameId ":"1",
        //     // " declarationVer":"1.1.0"
        //   }
        // },
        SendValidCodeSM:{
          actionName:"SendValidCodeSM",
          url:'baseapi',
          postData: {
            mobile:this.getPubMobile,
            useType:"1"
            // "name":"Jack",

            // "gameId ":"1",
            // " declarationVer":"1.1.0"
          }
        },
        registerpayload:{
          actionName:"Register",
          url:'baseapi',
          postData: {
            mobile:"13390650501",
            // "name":"Jack",
            password:"rest",

            // "gameId ":"1",
            // " declarationVer":"1.1.0"
          }
        },
        mypayload:{
          actionName:"Login",
          url:'baseapi',
          postData: {
            mobile:"",
            password:""
            // "gameId ":"1",
            // " declarationVer":"1.1.0"
          }
        }
      }
    },

  directives: {
    TransferDom
  },
    computed:{

      logRes(){
        return this.$store.getters.all_logindata
      },
      regone() {
        return this.$store.getters.all_regone
      },
      regtwo() {
        return this.$store.getters.all_regtwo
      },
      member () {
        return this.$route.params.member
      },
      agent () {
        return this.$route.params.agent
      },
      xx(){
        return true
        // if(this.publicVali !== "")
        // { return true}
        // else {return false}
      },
      // shahex(){
      //   return sha1( all_login.sigin)
      // },

      SendValidCodeSMvalue(){
        return this.$store.getters.all_SendValidCodeSM
      },
      myrest(){
        return this.$store.getters.myrest
      },
     getPubMobile(){
       return this.publicMobile
     },
      getPubVali(){
        return this.publicVali
      },
    all_myrest(){
      // let xx = rest_ + thi ws.my
      return this.$store.getters.all_restful
      // return 333333
    },
    all_nots(){
      return this.$store.getters.all_nots
    },
    all_login(){
      return this.$store.getters.all_login
    },
      ...mapGetters([ 'evenOrOdd'
      ])
    }
    ,
    beforeMount(){ console.log(333)},

    beforeCreate(){
      console.info(this.$store.state.login);
    },
    methods:{

    onHide () {
      console.log('on hide')
    },
    onShow () {
      console.log('on show')
    },
    showPlugin () {
      this.$vux.alert.show({
        title: 'VUX is Cool',
        content: this.$t('Do you agree?'),
        onShow () {
          console.log('Plugin: I\'m showing')
        },
        onHide () {
          Vue.$vux.alert.hide()
          console.log('Plugin: I\'m hiding now')
        }
      })
    },
    showPluginAuto () {
      this.showPlugin()
      setTimeout(() => {
        this.$vux.alert.hide()
      }, 3000)
    },


// watch it above
       steptwo(){
         var two = {
          actionName:"Register",
          url:'baseapi',
           key:'RegisterTwo',
          postData: {
            mobile:this.publicMobile,
            password:this.publicPwd,
            step:"2",
            checkFromUserCode:true,
            validCode:this.getPubVali,
            fromUserCode:this.publicInvate,
            agentCode:this.agent,
            agentMemberCode: this.member
            // "name":"Jack",

            // "gameId ":"1",
            // " declarationVer":"1.1.0"
          }
        }
         this.$store.commit('restful_api',two)


         setTimeout(function () {
           if (this.regtwo.body.resultCode == 0){
             this.isActive = true;
           }else {
             var dd = this.regtwo.body.message;
             // alert(this.regone.body.message)
             this.$vux.alert.show({
               title:"提示",
               content:dd
             })

           }
         }.bind(this), 3000);








       },
       stepone(){
         var myonepay = {

          actionName:"Register",
          url:'baseapi',
           key:'RegisterOne',
          postData: {
            step:"1",
            mobile:this.getPubMobile,
            // password:"",
            validCode:this.getPubVali,
            checkFromUserCode:"",
            fromUserCode:""
            // "name":"Jack",

            // "gameId ":"1",
            // " declarationVer":"1.1.0"
          }
         }

        console.info("vuxxxxxihavaingx",this.$store.vux)
         // if(this.xx == true){
         //   this.$vux.alert.show({
         //     title:'提示',
         //     content:this.$t('请先验收手机号码，再点击下一步'),
         //   })
         // }
         this.$store.commit('restful_api',myonepay)
         setTimeout(function () {
           if (this.regone.body.resultCode == 0){
             this.next = true;
           }else {
             var dd = this.regone.body.message;
             // alert(this.regone.body.message)
             this.$vux.alert.show({
               title:"提示",
               content:dd
             })

           }
         }.bind(this), 3000);










           // this.next = true
       },
       sendValidCode(){
         // this.$vux.alert.show({content:'Be Careful'})
       var valid = {

          actionName:"SendValidCodeSM",
          url:'baseapi',
          postData: {
            mobile:this.publicMobile,
            useType:"1"
            // "name":"Jack",

            // "gameId ":"1",
            // " declarationVer":"1.1.0"
          }



       }
       // this.showPlugin()
      //          this.$vux.alert.show({
      //   title: '短信已发送成功',
      //   content:'请输入短信验证码到提示框中',
      //   onShow () {
      //     console.log('Plugin: I\'m showing')
      //   },
      //   onHide () {
      //     console.log('Plugin: I\'m hiding now')
      //   }
      // })
         var i = 60;
         var  that = this
        function onTimer () {
           document.getElementById('mycounter').innerHTML = i;
          i--;
           if (i < 0){
             that.mydisabled = false
           } else {
             that.mydisabled = true
             // setTimeout(onTimer,1000)
           }
         }
         this.$store.commit('restful_api',valid)
         // var o = "验证出现问题请稍后再试"
         if ( this.SendValidCodeSM && this.SendValidCodeSMvalue !== undefined ) {

           var o = JSON.stringify(this.SendValidCodeSMvalue.body.message)
             setTimeout(function () {
               doit()
             }, 1000);


         var doit =   this.$vux.alert.show({
              title: '验证手机',
              content: this.$t(o),
              onShow () {
                console.log('Plugin: I\'m showing')
              },
              onHide () {
                console.log('Plugin: I\'m hiding  now')
              }
            })
          }else {

            this.$vux.alert.show({
              title: '验证手机',
              content: this.$t("验证中请稍后!"),
              onShow () {
                console.log('Plugin: I\'m showing')
              },
              onHide () {
                console.log('Plugin: I\'m hiding  now')
              }
            })
          }
          setTimeout(function(){
            if (this.SendValidCodeSMvalue.body.message == "发送成功") {

              // onTimer()
            }

              // var o = JSON.stringify(this.myrest.body.message)
           var o = JSON.stringify(this.SendValidCodeSMvalue.body.message)
            this.$vux.alert.show({
              title:'验证手机',
              content:this.$t(o)
            })
          }.bind(this),1000)
       },
        dosth () {

           this.$store.commit('restful_api',this.mypayload)
          var ddf = ""
          setTimeout(function ()  {
            var xx = this.logRes;
            if (xx) {
              console.log(xx,"sslogin ss")
              console.log(xx.body.message,"sslogin ss messgae")

             ddf =  xx.body.message
              f()
            } else {

            }
          }.bind(this), 1000);
       var f  = function() {
         this.$vux.alert.show({
           title:"登录",
           content:ddf
         })
       }.bind(this)
        },
        ...mapActions([
            'increment',
            'decrement',
            'incrementIfOdd'
        ]),
    },
    components: { Flexbox,FlexboxItem,XButton, Group, XInput, Tab, TabItem,Clocker }
			}


</script>
<style lang="less">
.submitbtn{
  width:80%;
}
.active{color:#333!important}
.top_tabs li{
  color:#999;
  list-style: none;
 float: left;
 width:50%;text-align: center;
}
.weui-cell__bd {
  padding-left:23px ;
}
@main-color: #ccb884;
.bg-leave {
	background: white;
}
.bg-enter{
	background:yellow;
}
.bg-enter-active{
	background: blue;
	transition:background-color 4s;
}
.bg-leave-active{
	background: red;
	transition:background-color 4s;
}

    /* body{background:#efeff8;} */
    /* .five .vux-x-input{height:6.8vh; width:80.3vw; margin:0 auto;  padding:0; background:#fff; border-radius:1.4vw;font-size:2.25vh;} */
    /* .five .weui-label { text-align: center; } */
    /* .phoneNum .weui-cell__hd{width:10.7vw;} */
    /* .code .weui-cell__hd{width:10.7vw;} */
    /* .code .weui-cell__ft{} */
    /* .five .code{margin-top:3vh; } */
    /* .five .weui-cell:before{border:0;} */
    /* .five p{padding-left:9.9vw; font-size:1.95vh; line-height:7.95vh; padding-bottom:1.5vh;} */
    /* .five .weui-btn{height:6.8vh; width:80.3vw; margin:0 auto; background:@main-color; font-size:2.55vh; } */
    ::-webkit-input-placeholder { /* WebKit browsers */
    color: #c8c7cc;
    }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #c8c7cc;
    }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #c8c7cc;
    }
    :-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #c8c7cc;
    }
</style>
